<template>
  <div class="dashboard" style="width: 1200px; height: 1800px">
    <div class="msg-top-text">速率统计</div>
    <div>
      <div class="msg-text">南向速率</div>
      <div id="southrate" style="width: 400px;height: 400px;float: left;margin-top: 100px;margin-left: 50px;" />
      <div id="southtraffic" style="width: 700px;height: 500px;margin-left: 450px;margin-top: 50px;" />
    </div>
    <div>
      <div class="msg-text">北向速率</div>
      <div id="northrate" style="width: 400px;height: 400px;float: left;margin-top: 100px;margin-left: 50px;" />
      <div id="northtraffic" style="width: 700px;height: 500px;margin-left: 450px;margin-top: 50px;" />
    </div>
    <div class="msg-top-text">流量统计</div>
    <div>
      <div style="margin-top:10px">
        <el-date-picker
          v-model="start"
          type="datetime"
          placeholder="选择开始时间"
          style="margin-left:15px"
          value-format="yyyy-MM-dd HH:mm:ss"
        />
        <el-date-picker
          v-model="end"
          type="datetime"
          placeholder="选择结束时间"
          style="margin-left:15px"
          value-format="yyyy-MM-dd HH:mm:ss"
        />
        <el-button style="margin-left:15px" type="primary" @click="submit">提交</el-button>
        {{ "数据量为" + datavolume }}
      </div>
      <div id="traffic" style="width: 400px;height: 400px;float: left;margin-top: 100px;margin-left: 50px;" />
    </div>
  </div>
</template>

<script>

const ITEMS_LIMIT = 10
import { DataVolume } from '../../api/status'
export default {
  name: 'Dashboard',
  data() {
    return {
      id: this.$route?.query.id,
      start: '',
      end: '',
      datavolume: '',
      southRateData: 0,
      northRateData: 0,
      southRateDatas: [],
      northRateDatas: []
    }
  },
  sockets: {
    connect() {
      console.log('websocket open')
      this.$socket.emit('client_request', { id: this.$route?.query.id })
      this.sockets.subscribe('server_response', this.websocketOnMessage)
    }
  },
  destroyed() {
    if (this.$socket) {
      this.$socket.emit('guanbi', 100)
      this.$socket.disconnect()
      this.sockets.unsubscribe('server_response')
      console.log('websocket close')
    }
  },
  created() {
    if (this.$socket) {
      this.$socket.emit('guanbi', 100)
      this.$socket.disconnect()
      this.sockets.unsubscribe('server_response')
      console.log('websocket close')
    }
  },
  mounted() {
    this.$socket.connect()
    this.renderChart()
  },
  methods: {
    SouthTraffic() {
      var myChart = this.$echarts.init(document.getElementById('southtraffic'))
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} bps'
          },
          axisPointer: {
            snap: true
          }
        },
        visualMap: {
          show: false,
          dimension: 0,
          pieces: [
            {
              lte: 6,
              color: 'green'
            },
            {
              gt: 6,
              lte: 8,
              color: 'green'
            },
            {
              gt: 8,
              lte: 14,
              color: 'green'
            },
            {
              gt: 14,
              lte: 17,
              color: 'green'
            },
            {
              gt: 17,
              color: 'green'
            }
          ]
        },
        series: [
          {
            name: 'Rate',
            type: 'line',
            smooth: true,
            data: this.southRateDatas
          }
        ]
      }
      myChart.setOption(option)
    },
    SouthRate() {
      var myChart = this.$echarts.init(document.getElementById('southrate'))
      var option = {
        series: [
          {
            radius: 160,
            max: 1000,
            type: 'gauge',
            axisLine: {
              lineStyle: {
                width: 30,
                color: [
                  [0.3, '#67e0e3'],
                  [0.7, '#37a2da'],
                  [1, '#fd666d']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: '#fff',
                width: 4
              }
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: '#fff',
                width: 4
              }
            },
            axisLabel: {
              color: 'auto',
              distance: 40,
              fontSize: 16
            },
            detail: {
              valueAnimation: true,
              formatter: '{value} bps',
              color: 'auto',
              fontSize: 24
            },
            data: [
              {
                value: this.southRateData
              }
            ]
          }
        ]
      }
      myChart.setOption(option)
    },
    NorthTraffic() {
      var myChart = this.$echarts.init(document.getElementById('northtraffic'))
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} bps'
          },
          axisPointer: {
            snap: true
          }
        },
        visualMap: {
          show: false,
          dimension: 0,
          pieces: [
            {
              lte: 6,
              color: 'green'
            },
            {
              gt: 6,
              lte: 8,
              color: 'green'
            },
            {
              gt: 8,
              lte: 14,
              color: 'green'
            },
            {
              gt: 14,
              lte: 17,
              color: 'green'
            },
            {
              gt: 17,
              color: 'green'
            }
          ]
        },
        series: [
          {
            name: 'Rate',
            type: 'line',
            smooth: true,
            data: this.northRateDatas
          }
        ]
      }
      myChart.setOption(option)
    },
    NorthRate() {
      var myChart = this.$echarts.init(document.getElementById('northrate'))
      var option = {
        series: [
          {
            radius: 160,
            max: 1000,
            type: 'gauge',
            axisLine: {
              lineStyle: {
                width: 30,
                color: [
                  [0.3, '#67e0e3'],
                  [0.7, '#37a2da'],
                  [1, '#fd666d']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: '#fff',
                width: 4
              }
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: '#fff',
                width: 4
              }
            },
            axisLabel: {
              color: 'auto',
              distance: 40,
              fontSize: 16
            },
            detail: {
              valueAnimation: true,
              formatter: '{value} bps',
              color: 'auto',
              fontSize: 24
            },
            data: [
              {
                value: this.northRateData
              }
            ]
          }
        ]
      }
      myChart.setOption(option)
    },
    submit() {
      console.log('submit-------')
      DataVolume({
        id: this.id,
        start: this.start,
        end: this.end
      }).then((res) => {
        console.log(res)
        this.datavolume = res.data.dataVolume
      })
    },
    renderChart() {
      this.SouthTraffic()
      this.SouthRate()
      this.NorthTraffic()
      this.NorthRate()
    },
    websocketOnMessage(res) {
      // 数据接收
      const { northDataRate, southDataRate } = res?.data?.data || {}
      this.northRateData = Number(northDataRate)
      this.southRateData = Number(southDataRate)
      this.northRateDatas.push(this.northRateData)
      this.southRateDatas.push(this.southRateData)
      while (this.northRateDatas.length > ITEMS_LIMIT) {
        this.northRateDatas.shift()
      }
      while (this.southRateDatas.length > ITEMS_LIMIT) {
        this.southRateDatas.shift()
      }
      this.renderChart()
    }
  }
}
</script>

<style>
.dashboard {
  margin: 10px 15px 15px 20px;
  width: 88em;
  height: 52em;
  background: white;
  border-radius: 1.5em;
}

.msg-top-text {
  font-size: 1.2em;
  color: #4d4f5c;
  border-bottom: 0.08em solid dimgray;
  font-weight: 700;
  height: 2.5em;
  margin: 0 0.93em 0 0.93em;
  padding: 0.8em 0 0.5em 0;
}

.msg-text {
  font-size: 1.2em;
  color: #4d4f5c;
  font-weight: 700;
  height: 2.5em;
  margin: 0 0.93em 0 0.93em;
  padding: 0.8em 0 0.5em 0;
}
</style>
